<template>
  <!-- 右栏 -->
  <div class="right-col">
    <div class="lan sticky-lan">
      <ContentModel />

      <div class="model" @click="getHitoketo()">
        <div class="tittle">一言</div>
        <div class="lanitems">
          {{hitokoto}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted } from "vue";
import axios from "axios";
import ContentModel from './LanComps/ContentModel.vue'

export default {
  setup() {
    const hitokoto = ref("")
    //https://v2.jinrishici.com/one.json
    //https://v2.jinrishici.com/hitokoto/get?type=social

    function getHitoketo() {
      axios.get("https://v2.jinrishici.com/one.json").then(
        (response) => {
          hitokoto.value = response.data.data.content;
        },
        (error) => {
          console.log("一言请求失败", error.message);
        }
      );
    }

    onMounted(() => {
      getHitoketo()
    })
    return { hitokoto, getHitoketo };
  },
  components: {ContentModel}
};
</script>

<style scoped>
.right-col {
  margin-left: 20px;
  order: 3;
  width: 150px;
}
.sticky-lan {
  position: sticky;
  top: 80px;
}

/* 栏目标题 */
.tittle {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

/* 二档，中等，隐藏右边栏 */
@media screen and (max-width: 900px) {
  .right-col {
    display: none;
  }
}
</style>